<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* div {
        width: 200px;
        height: 200px;
        background-color: pink;

    } */

    /* .one {
        margin-bottom: 20px;
    } */

    .two {
        /* margin: 30px; */
        /* margin: 30px 50px;  上下  左右 */
        /* margin: 30px 15px 50px;  上  左右 下 */
        /* margin: 30px 15px 50px 40px;  上 右 下 左 */
    }

    /* text-align 可以让行内和行内块元素水平居中对其 */
    /* .father {
        width: 400px;
        height: 400px;
        background-color: blueviolet;
        overflow: hidden;
    }

    /*.son {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*塌陷问题*/
    /* margin-top: 20px;  父亲盒子会和儿子一起下沉 */
    /*
        1.给父亲添加边框
        2.给父亲定义内边距
        3.给父亲添加overflow:hidden
        */
    /* margin-top: 40px; */

    /* } */
    /* 去除所有元素内外边距
*{
    padding: 0;
    margin: 0;
} */
    /* 行内元素尽量只设置左右边距 */
</style>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>

</html>